<template>
  <!--ref 方便找到元素  -->
  <div ref="chartBox" :style="{ height: '100%' }" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'GChart',
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      resizeFn: () => {
        this.chart.resize()
      },
    }
  },
  watch: {
    options: {
      deep: true,
      handler() {
        console.log('options更新了...')
        this.renderChart()
      },
      //   immediate:true
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chartBox)
      this.renderChart() // 相对晚时机渲染echarts保证有元素
      // 绑定resize事件
      window.addEventListener('resize', this.resizeFn)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeFn)
    this.chart.dispose()
  },
  methods: {
    renderChart() {
      //存放数据变更的业务行为
      // 若是地图需要registerMap
      this.chart.clear() // 清空之前的数据
      this.options && this.chart.setOption(this.options)
    },
  },
}
</script>

<style lang="" scoped></style>
